<template>
  <div id="sys5List">
    <el-card shadow="hover" class="box-card">
      <div slot="header" class="clearfix">
        <span>角色</span>
        <el-button
          style="float:right"
          size="mini"
          icon="el-icon-plus"
          v-btnper="'sys10Listnew'"
        >
          新增角色
        </el-button>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          size="mini"
          style="width:200px;float:right;margin-right:20px"
          v-model="txtsearch"
          clearable
        >
        </el-input>
      </div>
      <el-collapse accordion @change="OnExpand">
        <transition-group name="breadcrumb">
          <el-collapse-item
            v-for="item in tableData"
            :key="item.System_10_10"
            :name="item.System_10_10"
          >
            <template slot="title">
              <el-row style="width:100%">
                <el-col :span="12">
                  {{ item.System_10_20 }}
                </el-col>
                <el-col style="text-align:right" :span="10">
                  <el-button
                    size="mini"
                    @click.stop
                    icon="el-icon-edit"
                    @click="sys10edit(item)"
                    v-btnper="'sys10Listedit'"
                  >
                    编辑
                  </el-button>
                  <el-button
                    size="mini"
                    @click.stop
                    icon="el-icon-delete"
                    v-btnper="'sys10Listdelete'"
                  >
                    删除
                  </el-button>
                </el-col>
              </el-row>
            </template>
            <el-row>
              <el-divider></el-divider>
              包含用户
              <template v-for="sys1 in sys1Data">
                <el-divider
                  :key="sys1.System_1_10"
                  direction="vertical"
                ></el-divider>
                <el-tag
                  :key="sys1.System_1_10"
                  :closable="$_btnper('btndel')"
                  :disable-transitions="false"
                  @close="removeuser(item, sys1)"
                >
                  <span style="line-height:32px">
                    {{ sys1.System_1_20 }}
                  </span>
                </el-tag>
              </template>
              <div style="display: inline-block;">
                <el-button
                  size="mini"
                  class="button-new-tag"
                  @click.stop
                  icon="el-icon-check"
                  @click="userselect(item)"
                  v-btnper="'btnnew'"
                >
                  选择用户
                </el-button>
              </div>
            </el-row>
            <br />
            <el-row>
              <el-table
                v-loading="loading"
                border
                :data="menuitems"
                stripe
                style="width: 100%"
                row-key="System_7_10"
                default-expand-all
                :ref="`sys7Table_${item.System_10_10}`"
                @selection-change="system12Change(arguments, item.System_10_10)"
              >
                <el-table-column type="selection" width="40"> </el-table-column>
                <el-table-column type="index" width="40"> </el-table-column>
                <el-table-column prop="System_7_20" width="200" label="菜单">
                </el-table-column>
                <el-table-column prop="System_7_20" label="功能">
                  <template slot-scope="scope">
                    <el-checkbox-group
                      v-model="checkedSys8"
                      @change="
                        system13Change(
                          arguments,
                          item.System_10_10,
                          scope.row.System_7_10,
                          scope.row.System_7_30
                        )
                      "
                    >
                      <el-checkbox
                        v-for="sys8 in getSystem8(scope.row.System_7_30)"
                        :label="sys8.System_8_10"
                        :key="sys8.System_8_10"
                        >{{ sys8.System_8_20 }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </el-collapse-item>
        </transition-group>
      </el-collapse>
    </el-card>
  </div>
</template>
<script>
import { System10, System7, System8 } from "@/api";
import sys10Edit from "./sys10Edit.vue";
import sys1Selete from "../../system1/components/sys1Selete";
import { isArrayEmpty } from "@/utils/validate.js";
export default {
  data() {
    return {
      tableData: [],
      sys1Data: [], //用户
      sys12Data: [], //关联的菜单 勾选
      sys13Data: [], //关联的按钮 勾选
      sys7Data: [], //菜单
      sys8Data: [], //按钮
      menuitems: [],
      checkedSys8: [], //按钮选择
      txtsearch: "",
      loading: true
    };
  },
  //外部属性
  props: {},
  //内部方法
  methods: {
    //初始化
    async initPage() {
      const loading = this.$loading({
        target: "#sys5List",
        lock: true,
        text: "加载中..."
      });
      this.getsys10data();
      //菜单列表
      let sys7data = await System7.get();
      this.sys7Data = sys7data;
      this.initmenuitems();

      //按钮
      let sys8data = await System8.get();
      this.sys8Data = sys8data;

      loading.close();
    },
    async getsys10data() {
      //角色
      let sys10data = await System10.get(this.txtsearch);
      this.tableData = sys10data;
    },
    //选择的用户
    async getsys1data(System_10_10) {
      //用户
      let sys1data = await System10.getSystem1(System_10_10);
      this.sys1Data = sys1data;
    },
    //选择的菜单ID
    async getsys12data(System_10_10) {
      this.loading = true;
      let sys12data = await System10.getSystem12(System_10_10);
      this.sys12Data = sys12data;
    },
    //勾选按钮
    async getsys13data(System_10_10) {
      this.loading = true;
      //勾选按钮
      let sys13data = await System10.getSystem13(System_10_10);
      this.sys13Data = sys13data;
    },
    //展开
    async OnExpand(System_10_10) {
      this.loading = true;
      this.checkedSys8 = [];
      //用户
      await this.getsys1data(System_10_10);
      //勾选菜单
      await this.getsys12data(System_10_10);
      //勾选按钮
      await this.getsys13data(System_10_10);

      let checkedSys7 = this.sys12Data.map(item => parseInt(item.System_12_30));

      this.checkedSys8 = this.sys13Data.map(item =>
        parseInt(item.System_13_50)
      );

      this.$nextTick(() => {
        if (this.$refs[`sys7Table_${System_10_10}`]) {
          let reftable = this.$refs[`sys7Table_${System_10_10}`][0];
          reftable.clearSelection();
          this.sys7Data.forEach(item => {
            if (checkedSys7.includes(item.System_7_10)) {
              reftable.toggleRowSelection(item);
            }
          });
        }
        this.loading = false;
      });
    },
    //打开页面
    sys10edit(item) {
      this.getsys10edit().show({ form: { ...item } });
    },
    //打开角色编辑
    getsys10edit() {
      let edit = this.$window(sys10Edit, "编辑角色");
      edit.$on("onSys10Save", (res, data) => {
        res.MsRbool && this.getsys10data();
      });
      return edit;
    },
    //打开选择用户
    getsys1selete(System_10_10) {
      let edit = this.$window(sys1Selete, "选择用户");
      edit.$on("onSys1Save", users => {
        let ids = users.map(item => item.System_1_10).join(",");
        this.addUser(System_10_10, ids);
        edit.close();
      });
      return edit;
    },
    //添加用户
    async addUser(System_10_10, ids) {
      let res = await System10.addUser(System_10_10, ids);
      res.strMS && this.$message(res.strMS);
      res.MsRbool && this.getsys1data(System_10_10);
    },
    //初始化菜单
    initmenuitems() {
      let getChildren = item => {
        let thisc = this.sys7Data.search({ pid: item.id });
        thisc.forEach(thisc_item => {
          thisc_item.children = getChildren(thisc_item);
        });
        return thisc;
      };
      //得到子菜单
      this.sys7Data.forEach(item => {
        if (!item.pid) {
          item.children = getChildren(item);
          this.menuitems.push(item);
        }
      });
    },
    //得到勾选的按钮
    getSystem8(str40) {
      let data = this.sys8Data.search({ System_8_40: str40 });
      return data;
    },
    //删除用户
    async removeuser({ System_10_10 }, { System_1_10 }) {
      let res = await System10.removeUser(System_10_10, System_1_10);
      res.strMS && this.$message(res.strMS);
      res.MsRbool && this.getsys1data(System_10_10);
    },
    //选择用户
    userselect({ System_10_10 }) {
      let notUid = this.sys1Data.map(item => item.System_1_10).join(",");
      this.getsys1selete(System_10_10).show({ notUid });
    },
    //选择菜单
    async system12Change(val, System_10_10) {
      if (this.loading) {
        return;
      }
      this.loading = true;
      //let res = await System10.removeUser(System_10_10, System_1_10);
      let type = 0; //判断新增1还是删除0
      val = val[0].map(item => parseInt(item.System_7_10));
      let checkedSys7 = this.sys12Data.map(item => parseInt(item.System_12_30));
      let str30 = checkedSys7.filter(item => {
        return !val.includes(item);
      });
      if (isArrayEmpty(str30)) {
        type = 1;
        str30 = val.filter(item => {
          return !checkedSys7.includes(item);
        });
      }
      if (!isArrayEmpty(str30)) {
        let res = await System10.saveSys12(System_10_10, str30[0], type);
        res.strMS && this.$message(res.strMS);
        if (res.MsRbool) {
          await this.getsys12data(System_10_10);
        }
      }
      this.loading = false;
    },
    //选择按钮
    async system13Change(val, System_10_10, System_13_30, System_13_40) {
      if (this.loading) {
        return;
      }
      this.loading = true;
      let type = 0; //判断新增1还是删除0
      val = val[0];
      let checkedSys8 = this.sys13Data.map(item => parseInt(item.System_13_50));
      let str50 = checkedSys8.filter(item => {
        return !val.includes(item);
      });
      if (isArrayEmpty(str50)) {
        type = 1;
        str50 = val.filter(item => {
          return !checkedSys8.includes(item);
        });
      }
      if (!isArrayEmpty(str50)) {
        let res = await System10.saveSys13(
          System_10_10,
          System_13_30,
          System_13_40,
          str50[0],
          type
        );
        res.strMS && this.$message(res.strMS);
        if (res.MsRbool) {
          await this.getsys13data(System_10_10);
        }
      }
      this.loading = false;
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  async mounted() {
    await this.initPage();
  },
  //计算属性
  computed: {},
  //监视
  watch: {
    txtsearch() {
      this.initPage();
    }
  }
};
</script>

<style></style>
